<!DOCTYPE html>
<!--
2016-12-27 SoChishun Added.
-->
<html>
    <head>
        <title>Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../skin/scriptlib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../skin/scriptlib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="../skin/scriptlib/ui-layout-1.4.0/layout-default-min.css" />
        <link rel="stylesheet" href="../skin/scriptlib/jquery-ui-1.12.1/jquery-ui.min.css" />
        <link rel="stylesheet" href="../skin/theme/sueuix5/css/sueuix5.css" />
        <link rel="stylesheet" href="../skin/theme/sueuix5/css/index.css" />
    </head>
    <body>
        <!--
        ====body====
        body_hd_include
        body_aside
        body_main
        body_ft_include
        body_ft_script
        -->        
        <!--body_hd_include-->
        <script src="../skin/scriptlib/jquery/jquery-1.12.3.min.js"></script>
        <script src="../skin/scriptlib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="../skin/scriptlib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <script src="../skin/scriptlib/jquery-ui-1.12.1/i18n/datepicker-zh-CN.js" type="text/javascript"></script>
        <script src="../skin/scriptlib/jQuery-Timepicker-Addon-1.6.3/dist/jquery-ui-timepicker-addon.min.js"></script>
        <script src="../skin/scriptlib/ui-layout-1.4.0/jquery.layout-min.js"></script>
        <!--/body_hd_include-->
        <!--head-->
        <div class="ui-layout-north">
            <div class="head">
                <div class="col-lg-3">                    
                    <div class="logo"><a href="index.html">SUEUIX 5.0</a><small>基于jQuery生态系统的开箱即用前端框架</small></div>
                </div>
                <div class="col-lg-5 col-lg-offset-4">
                    <div class="top-right-zone">
                        <ul class="nav nav-pills">
                            <li><a href="#" title="在新窗口中打开网站前台" target="_blank"><i class="glyphicon glyphicon-home"></i>网站</a></li>
                            <li><a href="#" title="把当前网址加入收藏夹"><i class="glyphicon glyphicon-heart"></i>收藏</a></li>
                            <li id="my-message" style="position: relative;">
                                <a href="#" title="您有新的通知消息，请及时处理"><i class="glyphicon glyphicon-envelope"></i>消息<em class="badge" style="color:#F90">42</em></a>
                                <div class="panel panel-danger xsui-dropdown-panel" style="width:170px; right: 0;">
                                    <div class="panel-heading">通知消息<a href="#" class="xsui-panel-close-button"><i class="glyphicon glyphicon-remove"></i></a></div>
                                    <ul class="list-group">
                                        <li class="list-group-item"><a href="#" title="架的探索也随着版本迭代">架的探索也随着版本...</a></li>
                                        <li class="list-group-item"><a href="#" title="架的探索也随着版本迭代">架的探索也随着版本...</a></li>
                                        <li class="list-group-item"><a href="#" title="架的探索也随着版本迭代">架的探索也随着版本...</a></li>
                                        <li class="list-group-item"><a href="#" title="架的探索也随着版本迭代">架的探索也随着版本...</a></li>
                                    </ul>
                                    <div class="panel-footer text-right">
                                        <a href="#">更多...</a>
                                    </div>
                                </div>
                            </li>
                            <li id="user-profile" style="position: relative;">
                                <a href="#"><img class="xsui-img-16" src="../skin/theme/sueuix5/images/face.png" alt="" style="vertical-align: text-bottom; margin-right: 5px;" />Administrator</a>
                                <div class="panel panel-info xsui-dropdown-panel" style="width:300px; right:0">
                                    <div class="panel-heading">个人资料<a href="#" class="xsui-panel-close-button"><i class="glyphicon glyphicon-remove"></i></a></div>
                                    <div class="panel-body">
                                        <table>
                                            <tr>
                                                <th style="text-align: center;"><img class="xsui-img-72" style="margin:0 10px 0 5px;" src="../skin/theme/sueuix5/images/face.png" alt="" /></th>
                                                <td>
                                                    帐号：Administrator<br />
                                                    昵称：澜<br />
                                                    角色：管理员<br />
                                                    部门：无<br />
                                                </td>
                                            </tr>
                                            <tr><th>上次登录：</th><td>11-29 18:11 IP:192.168.1.93</td></tr>
                                            <tr><th>个性签名：</th><td>坚持产品梦想</td></tr>
                                        </table>
                                    </div>
                                    <div class="panel-footer text-right">
                                        <a href="#" title="编辑个人资料"><i class="glyphicon glyphicon-edit"></i>编辑</a>
                                        <a href="#" title="离开电脑并锁定界面"><i class="glyphicon glyphicon-lock"></i>锁定</a>
                                        <a href="#" title="登出当前帐号"><i class="glyphicon glyphicon-off"></i>退出</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div style="margin:10px 5px 0 0; text-align: right;">
                            <div class="xsui-clock" id="head-clock">
                                <span class="xsui-simple-time">00:00:00</span>
                                <div class="xsui-clock-panel xsui-dropdown-panel">
                                    <table>
                                        <tr><td><canvas id="clock1_" width="191px;" height="191px"></canvas></td><td><div class="xsui-calendar-panel"></div></td></tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                    
            </div>
        </div>
        <!--/head-->
        <!--aside-->        
        <div class="ui-layout-west">
            <div class="aside-menu">
                <h3>基础(Base)</h3>
                <div>                    
                    <ul>
                        <li><a href="序言.html" title="">序言(Preface)</a></li>
                        <li><a href="安装.html" title="">安装SUEUIX5</a></li>
                        <li><a href="开发规范.html" title="">开发规范</a></li>
                        <li><a href="目录结构.html" title="">目录结构</a></li>
                    </ul>
                </div>
                <h3>HTML元素(Element)</h3>
                <div>
                    <ul>
                        <li><a href="按钮.html" title="">按钮(Button)</a></li>
                        <li><a href="超链接按钮.html" title="">超链接按钮(LinkButton)</a></li>
                        <li><a href="下拉按钮.html" title="">下拉按钮(DropdownButton)</a></li>
                        <li><a href="表单.html" title="">表单(Form)</a></li>
                        <li><a href="表格.html" title="">表格(Table)</a></li>
                    </ul>
                </div>
                <h3>组件(Componse)</h3>
                <div>
                    <ul>
                        <li><a href="小微章.html" title="">小微章(Badge)</a></li>
                        <li><a href="" title="">菜单(Menu)</a></li>
                        <li><a href="" title="">面包屑导航(Breadcrumb)</a></li>
                        <li><a href="" title="">选项卡(Tabs)</a></li>
                        <li><a href="" title="">折叠组件(Accordion)</a></li>
                        <li><a href="" title="">面板(Panel)</a></li>
                        <li><a href="" title="">搜索面板(SearchPanel)</a></li>
                        <li><a href="" title="">列表面板(ListPanel)</a></li>
                        <li><a href="" title="">按钮组(ButtonGroup)</a></li>
                        <li><a href="" title="">输入框组(TextboxGroup)</a></li>
                        <li><a href="" title="">开关按钮(SwitchButton)</a></li>
                        <li><a href="单文件上传.html" title="">文件上传(FileBox)</a></li>
                        <li><a href="" title="">下拉组件(Combobox)</a></li>
                        <li><a href="" title="">树形组件(Tree)</a></li>
                        <li><a href="" title="">树形表格(TreeTable)</a></li>
                        <li><a href="" title="">网格(Grid)</a></li>
                        <li><a href="" title="">属性窗口(PropertyGrid)</a></li>
                        <li><a href="" title="">对话框(Dialog)</a></li>
                        <li><a href="" title="">时间日期对话框(DateTimeBox)</a></li>
                        <li><a href="" title="">消息组件(Message)</a></li>
                        <li><a href="" title="">提示组件(Tooltip)</a></li>
                        <li><a href="" title="">进度条(ProgressBar)</a></li>
                        <li><a href="" title="">可视化模板设计(DraggableDesign)</a></li>
                        <li><a href="" title="">滚动侦测面板(ScrollSpyPanel)</a></li>
                    </ul>
                </div>
                <h3>插件(Plugin)</h3>
                <div>
                    <ul>
                        <li><a href="" title="">工具栏(Toolbar)</a></li>
                        <li><a href="" title="">分页条(Pagination)</a></li>
                        <li><a href="" title="">自动完成(AutoComplete)</a></li>
                        <li><a href="" title="">表单验证(FormValidate)</a></li>
                        <li><a href="" title="">评论列表(CommentTree)</a></li>
                        <li><a href="" title="">可视化编辑器(Editor)</a></li>
                        <li><a href="批量文件上传.html" title="">批量上传(MultiFileUploader)</a></li>
                        <li><a href="" title="">页面头部(PageHead)</a></li>
                        <li><a href="" title="">图片轮播(Slider)</a></li>
                        <li><a href="" title="">图表(Chart)</a></li>
                        <li><a href="" title="">在线客服(LiveChat)</a></li>
                        <li><a href="" title="">回到顶部(StickyMenu)</a></li>
                        <li><a href="" title="">全屏切换(FullScreen)</a></li>
                        <li><a href="" title="">代码修饰(CodePrettify)</a></li>
                        <li><a href="" title="">地区选择器(RegionPicker)</a></li>
                    </ul>
                </div>
                <h3>附录(Appendix)</h3>
                <div>
                    <ul>
                        <li><a href="" title="">颜色</a></li>
                        <li><a href="" title="">图标</a></li>
                        <li><a href="" title="">跨屏兼容(PC,Tablet,Mobile)</a></li>
                        <li><a href="" title="">在线资源</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--aside-->
        <!--main-->
        <div class="ui-layout-center"><main></main></div>
        <!--/main-->
        <!--foot-->
        <div class="ui-layout-south">
            <div class="foot">
                <div class="xsui-foot-right">
                    <div class="copyright">Copyright &COPY; 2016 SUEUIX 5.0</div>
                </div>
                <div class="xsui-clear"></div>
            </div>

        </div>
        <!--/foot-->
        <div id="window-config-text" style="display:none">{"KINDEDITOR_UPLOADER":"{:url('UploadHandler/kindeditor_upload')}"}</div>
        <!--body_ft_include-->
        <script src="../skin/theme/sueuix5/plugin/canvas-clock/canvas_clock.js" type="text/javascript"></script>
        <script src="../skin/theme/sueuix5/ctrl/index/index.js"></script>
        <!--/body_ft_include-->
        <!--body_ft_script-->
        <script type="text/javascript">
            /* page config data */
            window.config = new Function("return " + $('#window-config-text').text())();
            $(document).ready(function () {
                xsui_init();
            });
        </script>
        <!--/body_ft_script-->
    </body>
</html>
